{% extends "base.html" %}

{% block content %}
<div id="app">
    <div>{{id}}</div>
    <div id="chartDemo" style="width: 600px;height:400px;"></div>
    <el-button type="primary" @click="presentEchart" style="position: relative;float: right;top: -400px">显示表格</el-button>
    <a href="{{SITE_URL}}api/test/">点我跳转</a>
    <div>{{testSpan}}xxxxxxxxx</div>
</div>
<script>
    new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data() {
            return {
                arg: "",
                firstData: "",
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            // let url = decodeURI(window.location.href);
            // // 参数id
            // let argsIndex = url.split("?id=");
            // this.arg = argsIndex[1]

            this.presentFirst()
        },
        methods: {
            presentFirst() {
                let params = {
                    "id": this.arg
                }
                axios.get('{{ SITE_URL }}detail_report/', {params: params}).then(res => {
                    if (res.data.result) {
                        this.firstData = res.data.data
                        console.log(res)
                        this.$message({
                            message: '数据连接成功',
                            type: 'success'
                        })
                        this.presentEchart()
                    }
                })
            },
            presentEchart() {
                console.log(document.getElementById("chartDemo"))
                let myChart = echarts.init(document.getElementById("chartDemo"));

                // 指定图表的配置项和数据
                let option = this.firstData

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
        }
    })
</script>

{% endblock %}

